<template>
  <div>
    <div id="centreRight2Chart2" ></div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      chart: null,
      newsList: null,
      company_id:''
    };
  },
  mounted() {
    this.getData()
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    selectProp:{
      handler(n){
        console.log('centreRight2Chart2获取父组件的参数： ' + n)
        this.company_id = n
        this.getData()
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },
  methods: {
    //近6个月接收量
    getData(){//这里是请求后台的数据
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/querySumByMonth?companyId=' + this.company_id).then((response)=>{
        this.newsList = response.data.data;
        this.draw()
      })
    },
    draw() {//这里是echarts图标的方法
      let month = this.newsList.map((item) =>{
        return item.receiveMonth
      })
      //先用set去重
      let set4 = new Set(month)
      //然后转成array
      //得到近6个月的月份,echarts的data里需要这种数组的格式
     //distinctMonth = ["2020-10","2020-11","2020-12","2021-1","2021-2","2023-3"]
      const distinctMonth = Array.from(set4)
      //得到6个月的垃圾船舶的数据
      const yval1 = this.newsList.filter(r => r.sewageType ==='船舶垃圾').map(r => r.receiveNum.toFixed(2))
      //得到6个月的生活污水的数据
      const yval2 = this.newsList.filter(r => r.sewageType ==='生活污水').map(r => r.receiveNum.toFixed(2))

      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreRight2Chart2"));
      let option = {
        //图标的提示框组件,鼠标放上去显示的一些提示信息
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //网格容器,可以控制图表大小
        grid: {
          left: '4%',
          right: '2%',
          bottom: '12%',
          top: '4%',
          containLabel: true
        },
        //设置x轴的相关配置
        xAxis: {
          //修改刻度标签相关样式
          axisLabel: {
            interval: 0,//横轴信息显示
            color: "rgba(255,255,255,.9)"
          },
          //不显示x轴的线
          axisLine: {
            show: true,
          },
          data:distinctMonth, //6个月的月份数组数据
          crosshair: true,
          labels: {
            step: 1,
            staggerLines: 1,
          },
          tickLength: 3
        },
        //设置y轴的相关配置
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255,255,255,.9)"
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          allowDecimals: false,
          gridLineColor: "#273E53",
          lineColor: "#273E53",
          lineWidth: 1,
        },
        // 图例组件
        legend: {
          orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                     // 'horizontal' ¦ 'vertical'
          x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                                     // 'center' ¦ 'left' ¦ 'right'
                                     // ¦ {number}（x坐标，单位px）
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                                     // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                     // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 10,             // 图例图形宽度
          itemHeight: 10,            // 图例图形高度
          bottom: '2%',               //下面距离
          textStyle: {
            color: 'white',          // 图例文字颜色
            fontSize :18
          }
        },

        //系列图标配置
        series: [
          {
            name: '船舶垃圾',
            type: 'bar',
            // color: 'rgb(86, 137, 239)',//柱子的颜色
            color: 'rgba(250,98,46,0.8)',//柱子的颜色
            barWidth: '35%',//柱子的宽度
            data: yval1  //船舶垃圾数组数据
          },
          {
            name: '生活污水',
            type: 'bar',
            // stack: '总量',
            color: 'rgb(85,206,160)',
            barWidth: '35%',//柱子的宽度
            data: yval2 //垃圾船舶数组数据
          },

        ],
      }

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
#centreRight2Chart2 {
  width: 100%;
  height: 280px;
  margin: 0 auto;
}
</style>
